import React from 'react'
import PropTypes from 'prop-types'
import {
	Table,
	Popconfirm
} from 'antd'

/**
 *	dva组件与路由页面的区别
 *		dva作者认为自己是一个最佳实践，写的确实不错，作者认为如果不需要从model中connect数据则称为组件，
 *		而需要连接数据的是路由控制页面，那么当前TodoItem数据需要通过父组件传递，其delete、finish方法也来自父组件，
 *		这是设计思路问题，尽管当前组件可以自己connect数据。
 *	ant design Table、Popconfirm
 *		1> Table组件默认行列高度有点高，可以使用size="default/middle/small"调整其大小；
 *		2> 表格自带pagination属性，他是一个分页组件，如果不需要分页组件可以设置为false,默认分页组件有一系列默认参数，
 *			典型的就是默认10页一组，支持前台数据自动分页，这是个蛮好玩的供，尽管前台分页需要加载全部数据从而影响性能。
 *		3> Table的columns、dataSource属性实际上容易理解。
 ￥		4> Popconfirm组件模拟window.confirm()方法，根据用户操作确定是否需要删除或者取消。
 */
const TodoItem=(props)=>{
	const columns=[{
		title:"ID编号",
		dataIndex:"id",
		key:"id"
	},{
		title:"Title",           //thead，列头
		dataIndex:"title",
		key:"title"
	},{
		title:"Status",
		render:(text,record)=>{
			let str="完成";
			if(!record.finished){
				str="未完成"
			}
			return str;
		},
		key:"finished"
	},{
		title:"Actions",
		render:(text,record)=>{
			return(
				<React.Fragment>
					<a onClick={(evt)=>props.onFinish(record)}>finish</a>	
					&nbsp;&nbsp;
					<Popconfirm title="Delete?" onConfirm={(evt) => props.onDelete(record.id)}>
						<a>delete</a>
					</Popconfirm>				
				</React.Fragment>
			)		
		}
	}];
	return (
		<Table 
			dataSource={props.todos}
			columns={columns}
			size="small"
		/>	
	);
};

/**
 *	静态属性的标准写法，他区别于实例属性，es7支持在类内部写static关键字描述静态属性，作者认为可能需要babel,
 *		这种标准写法没有兼容性问题。	
 */
TodoItem.propTypes={
	onDelete: PropTypes.func.isRequired,
  	todos: PropTypes.array.isRequired
};

export default TodoItem;